<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>软件19.5班石堤林</title>
    <style>
        
       *{
           margin:0;
           padding:0;
       }
       ul li{
           list-style: none;
       }
       .nav{
           width:100%;
           height: 162px;
           text-align: center;
           font-size: 12px;
       }
       a{
           text-decoration: none;
       }
       .nav li{
           width:20%;
           height: 74px;
           float: left;
       }
       .nav li img{
           width: 40px;
       }
       .nav span{
           display: block;
           color: #6666;
       }
       .open{
            width: 100%;
            height: 44px;
            background-color: #232326;
            color: #fff;
            display: flex;
        }
        .open li{
            display:flex;
            justify-content: center;
            align-items: center;
        }
        .open li:nth-child(1){
            width: 8%;
        }
        .open li:nth-child(1) img{
            width: 10px;
        }
        .open li:nth-child(2){
            width: 10%;
        }
        .open li:nth-child(2) img{
            width:30px;
        }
        .open li:nth-child(3){
            width: 57%;
        }
        .open li:nth-child(4){
            width: 25%;
            background-color: #cd2323;
        }
        .sousuo-wrapper{
            width: 100%;
            height: 44px;
            background-color: #c82519;
            color: #fff;
            display: flex;
            align-items: center;
        }
        .bth,.denglu{
            width: 44px;
            height: 44px;
        }
        .sousuo{
            flex: 1;
            background-color: #fff;
            height: 30px;
            border-radius: 15px;
        }
        .denglu{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .bth span{
            margin: 12px 0 0 10px;
            width: 20px;
            height: 20px;
            display: block;
            background: url(./images/zuo.png) no-repeat;
            background-size: 100% 100%;
        }
        .jd{
            width: 20px;
            height: 15px;
            background: url(./images/xb.png) no-repeat;
            background-size: 200px;
            margin: 8px 8px 0px 15px;
            position: relative;
            z-index: 1;
            float: left;
        }
        .fangdajing{
            width: 18px;
            height: 15px;
            background: url(./images/xb.png) no-repeat;
            background-position: -80px 0;
            background-size: 200px;
            margin: 8px 0 0 15px;
            position: relative;
            z-index: 1;
            float: left
        }
        .jd::after{
            content: '';
            display: block;
            width: 1px;
            height: 15px;
            background-color: #dddddd;
            position:relative;
            left: 30px;
        }
    </style>
</head> 

<body>
    <ul class="open">
        <li><img src="./images/x.png" alt=""></li>
        <li><img src="./images/jd.png" alt=""></li>
        <li>打开京东APP，购物更轻松</li>
        <li>立即打开</li>
    </ul>

    <div class="sousuo-wrapper">
        <div class="bth">
            <span></span>
        </div>
        <div class="sousuo">
            <div class="jd"></div>
            <div class="fangdajing"></div>
        </div>
        <div class="denglu">登录</div>
    </div>

    <ul class="nav">
        <li>
            <a href="javascript:;">
                <img src="./images/1.png" alt="">
                <span>京东超市</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./images/2.png" alt="">
                <span>数码电器</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./images/3.png" alt="">
                <span>京东服饰</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./images/4.png" alt="">
                <span>京东生鲜</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./images/5.png" alt="">
                <span>京东到家</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./images/6.png" alt="">
                <span>充值缴费</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./images/7.png" alt="">
                <span>9.9元拼</span>
            </a>
        </li><li>
            <a href="javascript:;">
                <img src="./images/8.png" alt="">
                <span>领券</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./images/9.png" alt="">
                <span>领金贴</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./images/10.png" alt="">
                <span>PLUS会员</span>
            </a>
        </li>
    </ul>
</body>
</html>